<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<!-- 元素样式操作：  直接操作元素的样式下的属性和属性值
		css()               功能：
		                    1个参：传入css属性名
							功能：获取匹配集合元素中第一个元素css属性值
							2个参：传入css属性和属性名
							功能：设置匹配集合元素中所有元素css属性值
							n个参：传入多个css属性和属性名
							语法糖：css({"属性名":"属性值",
							                .......
							            "属性名":"属性值"})
		widtrh()和height()   功能：匹配元素集合中第一个元素宽高度
		                     无参：获取匹配元素集合中第一个元素宽高度
							 有参：设置匹配元素集合中第一个元素宽高度
							 width(数值)
		outerWidth()和outerHeight()
		出现原因：元素存在盒子中，盒子模型，宽度计算方式，内外边距+边框+内容
		无参：获取元素的宽高度，计算盒子模型，内边距+边框
		有参：传入bool值，true时，计算盒子模型，内外边距+边框
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.box{
				background-color: #dce6ff;
				margin: 20px;
				padding: 20px;
				border: 5px solid #cdffca;
			}
			.result{
				border-top: 10px solid #cdffca;
				font-weight: bold;
				
			}
		</style>
	</head>
	
	<body>
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色效果</button>
		<button id="setBtn">设置多属性效果</button>
		<button id="gsbtn">获取元素宽度/设置元素宽度</button>
		<button id="bpbtn">获取高度(内边距+边框)</button>
		<button id="bpmbtn">获取高度(内外边距+边框)</button>
		<button id="btn"></button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			$("#getColorbtn").click(function(){
				var bgColor=$(".box").css("background-color");
				$("#result").text("获取的属性值是："+bgColor);
			});
			$("#setColorbtn").click(function(){
				$(".box").css("background-color","aquamarine");
				$("#result").text("改变后的颜色为：绿色");
			});
		    $("#setBtn").click(function(){
				$(".box").css({"background-image":"url(../img/11111.gif)",
				               "border":"5px solid #ffffae",
							    "border-radius":"50%",
								"width":"300px",
								"height":"300px",
								"background-size":"100% 100%",
								"box-shadow":"5px 5px 10px #fbffa5"});
			});
		    $("#gsbtn").click(function(){
				var w=$(".box").width(400);
				$("#result").text("获取的宽度是："+w+"px");
				
			});
		    $("#bpbtn").click(function(){
				var bp=$(".box").outerHeight();
				$("#result").text("获取高度为："+bp+"px");
			});
			$("#bpmbtn").click(function(){
				var bpm=$(".box").outerHeight(true);
				$("#result").text("获取高度为："+bpm+"px");
			});
		</script>
		
	</body> 
</html>